<!doctype html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>Hello, world!</title>
  </head>
  <body>

    <div class="container" id="app" style="padding-bottom: 50px;">
        <h1>Hello, 添加问卷</h1>
        <!-- <div class="text-center"> <img src="imgs/test01.png"></div> -->
        <div class="row">
            <div class="col-md-5">
                <img src="imgs/test01.png" class="img-fluid img-thumbnail">
                <hr>
                <img src="imgs/xmt.jpeg" class="img-fluid img-thumbnail">
                
            </div>

            <div class="col-md-7">
                <!-- `uname`,`collage` ,`fresh` ,`improve` ,`tel` ,
                    `wechat` ,`work_city` ,`work` ,`is_test`,`reason` ,`salary` ,`training` ,
                    `we_do` ,`other_company` 
                -->
                <div class=""></div>
                <form>
                    <div class="form-group">
                        <label for="exampleInputPassword1">班级</label>
                        <select class="form-control" id="exampleFormControlSelect1" v-model="class_name">
                          <option value="1">移动应用2001</option>
                          <option value="2">移动应用2002</option>
                        </select>
                    </div>

                    <div class="form-group">
                      <label for="exampleInputEmail1">姓名</label>
                      <input type="text" v-model="uname" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" required> 
                    </div>
        
                    <div class="form-group form-check">
                        <input type="checkbox" class="form-check-input" id="exampleCheck1" v-model="fresh">
                        <label class="form-check-label" for="exampleCheck1">是否应届</label>
                    </div>
        
                    <div class="form-group">
                      <label for="exampleInputPassword1">最高学历</label>
                      <select class="form-control" id="exampleFormControlSelect1" v-model="collage">
                        <option value="1">专科</option>
                        <option value="2">本科</option>
                        <option value="3">研究生</option>
                      </select>

                    </div>
        
                    <div class="form-group form-check">
                        <input type="checkbox" required class="form-check-input" id="exampleCheck2" v-model="improve">
                        <label class="form-check-label" for="exampleCheck2">是否考虑提升学历</label>
                    </div>
        
                    <div class="form-group">
                        <label for="exampleInputEmail1">联系方式</label>
                        <input type="email" required class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" v-model="tel">
                        <small id="emailHelp" class="form-text text-muted">We'll never share your 联系方式 with anyone else.</small>
                    </div>
        
                    <div class="form-group">
                        <label for="exampleInputEmail1">微信号</label>
                        <input type="email" required v-model="wechat" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                        <small id="emailHelp" class="form-text text-muted">We'll never share your 微信号 with anyone else.</small>
                    </div>
        
                    <div class="form-group">
                        <label for="exampleInputEmail1">期望工作城市</label>
                        <input type="email" required class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" v-model="work_city">
                        <small id="emailHelp" class="form-text text-muted">We'll never share your 城市 with anyone else.</small>
                    </div>
        
                    <div class="form-group">
                        <label>意向工作方向是？为什么？</label>
                        <textarea class="form-control" required v-model="work"></textarea> 
                    </div>
        
                    <div class="form-group">
                        <label >是否想进入测试或者新媒体行业？具体哪个行业？</label>
                        <textarea class="form-control" required v-model="is_test"></textarea> 
                    </div>
        
                    <div class="form-group">
                        <label >为什么不从事这两个行业？有什么顾虑？</label>
                        <textarea class="form-control" v-model="reason" required></textarea> 
                    </div>
        
                    <div class="form-group">
                        <label >毕业预期薪资想拿多少？</label>
                        <textarea class="form-control" required v-model="salary"></textarea> 
                    </div>
        
                    <div class="form-group">
                        <label for="exampleFormControlSelect1">有考虑系统提升专业技能吗</label>
                        <select required class="form-control" id="exampleFormControlSelect1" v-model="training">
                            <option value="是">是</option>
                            <option value="否">否</option>
                        </select>
                    </div>
        
                    <div class="form-group">
                        <label>对于我们企业了解多少？</label>
                        <textarea required class="form-control" v-model="we_do" placeholder="测试、新媒体运营训练营"></textarea> 
                    </div>
        
                    <div class="form-group">
                        <label>有没有其他机构沟通过？自己是怎么想的？</label>
                        <textarea required class="form-control" v-model="other_company"></textarea> 
                    </div>
        
                    <button type="submit" class="btn btn-primary" @click.prevent="sbt">Submit</button>
                    <button type="reset" class="btn btn-danger">reset</button>
                    <a href="list.html" class="btn btn-primary">查看列表</a>
                    <span class="text-danger">{{msg}}</span>
                  </form>
            </div>
        </div>
    </div>
    
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/element.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                // `uname`,`collage` ,`fresh` ,`improve` ,`tel` ,
                //     `wechat` ,`work_city` ,`work` ,`is_test`,`reason` ,`salary` ,`training` ,
                //     `we_do` ,`other_company`
                // user:{
                    class_name:1,
                    uname:"",
                    collage:1,
                    fresh:false,
                    improve:false,
                    tel:"",
                    wechat:"",
                    work_city:"",
                    work:"",
                    is_test:'',
                    reason:"",
                    salary:"",
                    training:"是",
                    we_do:"",
                    other_company:"",
                    msg:""
                // }
            },
            methods:{
                async sbt(){
                    var data = {
                        class_name:this.class_name,
                        uname:this.uname,
                        collage:this.collage,
                        fresh:this.fresh ? 1 : 0,//应届
                        improve:this.improve ? 1 : 0,//提升学历
                        tel:this.tel,
                        wechat:this.wechat,
                        work_city:this.work_city,
                        work:this.work,
                        is_test:this.is_test,
                        reason:this.reason,
                        salary:this.salary,
                        training:this.training,
                        we_do:this.we_do,
                        other_company:this.other_company
                    }

                    // console.log(data)
                    if(!data.uname){
                        this.msg = "请填写姓名！"
                        setTimeout(() => {
                            $("html,body").animate({scrollTop:0},100)
                        }, 600);
                        return;
                    }

                    if(!data.salary){
                        this.msg = "期望薪资不能为空!"
                        return;
                    }

                    if(!data.work_city){
                        setTimeout(() => {
                            $("html,body").animate({scrollTop:"80px"},100)
                        }, 600);
                        this.msg = "请填写期望工作城市!"
                        return;
                    }
                    
                    // 发请求
                    try {
                        let res = await axios.post("/users/add",data)
                        let ret = res.data || {}
                        console.log(ret)
                        if(ret.data.affectedRows){
                            this.msg = "提交完成，谢谢参与！"
                            this.$message({
                                message: '提交完成，谢谢参与！',
                                type: 'success'
                            });
                            setTimeout(()=>{location.href="list.html"},3000)
                        }
                    } catch (error) {
                        console.log(error)
                    }
                    // 
                }
            }
        })
    </script>
  </body>
</html>